/*
  学习目标：组建通信-子传父 - 子组件划掉爸爸的钱
  1. 父组件内, 定义一个花钱的函数
  2. 💥通过props, 父传子回调函数
  3. 💥子组件内容, 通过props, 调用回调函数
  4. 父组件，完成花钱的计算
*/

import React from 'react';

export default class Parent extends React.Component {
  state = {
    money: 1000,
  };

  handleMakeMoney = () => {
    this.setState({
      money: 1000 + this.state.money,
    });
  };

  // 1. 父组件内, 定义一个花钱的函数
  handleCost = (num) => {
    // 4. 父组件，完成花钱的计算
    this.setState({
      money: this.state.money - num,
    });
  };

  render() {
    return (
      <div>
        <h1>{this.state.money}</h1>
        <button onClick={this.handleMakeMoney}>爸爸开始赚钱了</button>
        <Child
          // 2. 💥通过props, 父传子回调函数
          handleCost={this.handleCost}
          money={this.state.money}
        ></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div>
        <h1>爸爸给我钱了：{this.props.money} </h1>
        <button
          onClick={() => {
            // 3. 💥子组件内, 通过props, 调用回调函数
            this.props.handleCost(8000);
          }}
        >
          点击我，儿子要花爸爸的钱了
        </button>
      </div>
    );
  }
}
